<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="head">
            <div class="index">
              <input type="text" placeholder="请输入公告标题" v-model="value">
              <span class="iconfont icon-test126" @click="selects"></span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test214 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="notice">
            <div class="style">
              <el-row>
                <el-col :span="2">序号</el-col>
                <el-col :span="7">标题</el-col>
                <el-col :span="5">发布状态</el-col>
                <el-col :span="5">发布时间</el-col>
                <el-col :span="5">创建时间</el-col>
              </el-row>
            </div>

            <div class="scroll" v-if="!judgmentOfState">
              <el-row v-for="(site,key) in noticeData" :key="key">
                <el-col :span="2">{{site.serialNumber}}</el-col>
                <el-col :span="7" class="hover">
                  <router-link
                    :to="{name:'detailsOfAnnouncement', params:{title:site.title,creationTime:site.creationTime}}"
                    class="hov"
                  >{{site.title}}</router-link>
                </el-col>
                <el-col :span="5">{{site.state}}</el-col>
                <el-col :span="5">{{site.releaseTime}}</el-col>
                <el-col :span="5">
                  <div class="grid-content bg-purple">
                    {{site.creationTime}}
                    <span class="del">删除</span>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="selects" v-if="judgmentOfState">
              <el-row v-for="(site,key) in arr" :key="key">
                <el-col :span="2">{{site.serialNumber}}</el-col>
                <el-col :span="7" class="hover">
                  <router-link
                    :to="{name:'detailsOfAnnouncement', params:{title:site.title,creationTime:site.creationTime}}"
                    class="hov"
                  >{{site.title}}</router-link>
                </el-col>
                <el-col :span="5">{{site.state}}</el-col>
                <el-col :span="5">{{site.releaseTime}}</el-col>
                <el-col :span="5">
                  <div class="grid-content bg-purple">
                    {{site.creationTime}}
                    <span class="del">删除</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="page">
            <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import Paging from '@/components/common/paging/Paging'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      judgmentOfState: false,
      arr: [],
      value: '',
      noticeData: [
        {
          serialNumber: 1,
          title: '中秋节放假通知',
          state: '发布',
          releaseTime: '2017-12-05',
          creationTime: '2017-07-09 17:06:14'
        },
        {
          serialNumber: 2,
          title: '中秋节bu放假通知',
          state: '发布',
          releaseTime: '2017-12-05',
          creationTime: '2017-07-09 17:06:14'
        }
      ],
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '企业公告',
          path: ''
        }
      ]
    }
  },
  created () { },
  methods: {
    selects () {
      this.arr = []
      let value = this.value
      let title = this.noticeData
      if (value === '') {
        alert('null')
      } else {
        this.judgmentOfState = !this.judgmentOfState
        title.forEach((v, i) => {
          let serialNumber = v.serialNumber
          let title = v.title
          let state = v.state
          let releaseTime = v.releaseTime
          let creationTime = v.creationTime

          if (title.indexOf(value) >= 0) {
            this.arr.push({
              serialNumber: serialNumber,
              title: title,
              state: state,
              releaseTime: releaseTime,
              creationTime: creationTime
            })
          }
        })
      }
    },
    getPageId (id = 1) {
      this.pageId = id
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    Paging
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    background-color: #fff;
    width: 100%;
    height: 644px;
    box-sizing: border-box;
    .head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #20ade5;
      box-sizing: border-box;
      .index {
        margin-left: 20px;
        position: relative;
        input {
          width: 250px;
          height: 30px;
          font-size: 12px;
          border: 1px solid #e3e3e3;
          padding-left: 20px;
          &:hover {
            border: 1px solid #3bc1f1;
          }
        }
        span {
          position: absolute;
          left: 221px;
          top: 1px;
          display: inline-block;
          width: 50px;
          height: 30px;
          color: #99a6c4;
          text-align: center;
          line-height: 30px;
          &:hover {
            background-color: #f1f8ff;
            color: #3bc1f1;
          }
        }
      }
      .tree-list-top-right {
        margin-right: 50px;
        .iconfont {
          cursor: pointer;
          margin-right: 5px;
        }
      }
    }
    .notice {
      .style {
        .el-row {
          background-color: #fcfcfc;
          border: 1px solid #e3e3e3;
          width: 100%;
          height: 50px;
          font-size: 12px;
          line-height: 50px;
          .el-col {
            &:first-child {
              text-align: center !important;
            }
          }
        }
      }
      .scroll,
      .selects {
        .el-row {
          width: 100%;
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          border-bottom: 1px solid #e3e3e3;
          .hover:hover {
            .hov {
              color: #3bc1f1;
            }
          }
          .el-col {
            &:first-child {
              text-align: center !important;
            }

            .grid-content {
              display: flex;
              justify-content: space-between;
              .del {
                display: inline-block;
                width: 75px;
                height: auto;
                background-color: #a3bbd4;
                color: #fff;
                text-align: center;
                display: none;
              }
            }
          }
          &:hover {
            background-color: #f5f5f5;
            .grid-content {
              .del {
                display: block;
              }
            }
          }
        }
      }
    }
    .page {
      border: 1px solid #e3e3;
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
}
</style>
